<template>
  <div style="width: 100%;" class="f-column-Wcenter">

    <div class="table-box" style="margin-top: 10px;">

      <el-tabs type="border-card">
        <el-tab-pane>
          <span slot="label"><i class="el-icon-date"></i> 律师</span>
          <div style="width: 50%;margin: 20px 0;" class="f-row-Hcenter">
            <el-input style="width: 200px;" v-model="query1.lawName" placeholder="请输入律师姓名"></el-input>
            <el-dropdown style="margin-left: 30px;" @command="handleCommand1">
              <el-button type="primary">
                {{query1.command}}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="0">全部</el-dropdown-item>
                <el-dropdown-item command="1">草稿</el-dropdown-item>
                <el-dropdown-item command="2">审核中</el-dropdown-item>
                <el-dropdown-item command="3">审批通过</el-dropdown-item>
                <el-dropdown-item command="4">审批不通过</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button style="margin-left: 30px;" type="primary" icon="el-icon-search" @click="getTable1(1)">搜索</el-button>
          </div>
          <el-table ref="multipleTable" :data="tableData1" border style="width: 100%">
            <el-table-column prop="lawName" label="姓名">
            </el-table-column>

            <el-table-column prop="userId" label="申请账号id">
            </el-table-column>
            </el-table-column>
            <el-table-column prop="lawPhone" label="手机号">
            </el-table-column>
            <el-table-column prop="lawCountry" label="地区">
            </el-table-column>
            <el-table-column prop="lawCertificate" label="证件">
            </el-table-column>

            <el-table-column prop="approvalDesc" label="审批描述">
            </el-table-column>
            <el-table-column prop="state" label="项目状态">
              <template slot-scope="scope">

                <div class="f-row-Wcenter" style="color:#ff8f0f;">
                  {{scope.row.state == 0 ?'不可用':''}}
                  {{scope.row.state == 1 ?'草稿':''}}
                  {{scope.row.state == 2 ?'审核中':''}}
                  {{scope.row.state == 3 ?'审批通过':''}}
                  {{scope.row.state == 4 ?'审批不通过':''}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" class="f-row-Hcenter">
              <template slot-scope="scope">
                <div class="f-row-Hcenter">
                  <el-button @click="toDetails({page:'lawDetails',row:scope.row})" type="text" size="small">详情</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 100%;margin-top: 10px;" class="f-row-Wcenter">
            <el-pagination style="margin-left: 100px;" background layout="prev, pager, next" :page-size="query1.pageSize"
              :total="query1.total" @prev-click="onprevclick1" @next-click="onnextclick1" @current-change="onCurrentChange1">
            </el-pagination>
          </div>

        </el-tab-pane>
        <el-tab-pane label="会计">
          <div style="width: 50%;margin: 20px 0;" class="f-row-Hcenter">
            <el-input style="width: 200px;" v-model="query2.accName" placeholder="请输入会计姓名"></el-input>
            <el-dropdown style="margin-left: 30px;" @command="handleCommand2">
              <el-button type="primary">
                {{query2.command}}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="0">全部</el-dropdown-item>
                <el-dropdown-item command="1">草稿</el-dropdown-item>
                <el-dropdown-item command="2">审核中</el-dropdown-item>
                <el-dropdown-item command="3">审批通过</el-dropdown-item>
                <el-dropdown-item command="4">审批不通过</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button style="margin-left: 30px;" type="primary" icon="el-icon-search" @click="getTable2(1)">搜索</el-button>
          </div>

          <el-table ref="multipleTable" :data="tableData2" border style="width: 100%">
            </el-table-column>
            <el-table-column prop="userId" label="账号id">
            </el-table-column>
            </el-table-column>
            <el-table-column prop="accPhone" label="电话">
            </el-table-column>
            <el-table-column prop="accName" label="姓名">
            </el-table-column>
            <el-table-column prop="accCountry" label="所在国家/地区">
            </el-table-column>
            <el-table-column prop="accCertificate" label="证书">
            </el-table-column>
            <el-table-column prop="approvalDesc" label="审批描述">
            </el-table-column>
            <el-table-column prop="state" label="项目状态">
              <template slot-scope="scope">
                <div class="f-row-Wcenter" style="color:#ff8f0f;">
                  {{scope.row.state == 0 ?'不可用':''}}
                  {{scope.row.state == 1 ?'草稿':''}}
                  {{scope.row.state == 2 ?'审核中':''}}
                  {{scope.row.state == 3 ?'审批通过':''}}
                  {{scope.row.state == 4 ?'审批不通过':''}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" class="f-row-Hcenter">
              <template slot-scope="scope">
                <div class="f-row-Hcenter">
                  <el-button @click="toDetails({ page:'accDetails', row:scope.row })" type="text" size="small">详情</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 100%;margin-top: 10px;" class="f-row-Wcenter">
            <el-pagination style="margin-left: 100px;" background layout="prev, pager, next" :page-size="query2.pageSize"
              :total="query2.total" @prev-click="onprevclick2" @next-click="onnextclick2" @current-change="onCurrentChange2">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="监管">
          <div style="width: 50%;margin: 20px 0;" class="f-row-Hcenter">
            <el-input style="width: 200px;" v-model="query3.supName" placeholder="请输入监管姓名"></el-input>
            <el-dropdown style="margin-left: 30px;" @command="handleCommand3">
              <el-button type="primary">
                {{query3.command}}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="0">全部</el-dropdown-item>
                <el-dropdown-item command="1">草稿</el-dropdown-item>
                <el-dropdown-item command="2">审核中</el-dropdown-item>
                <el-dropdown-item command="3">审批通过</el-dropdown-item>
                <el-dropdown-item command="4">审批不通过</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <el-button style="margin-left: 30px;" type="primary" icon="el-icon-search" @click="getTable3(1)">搜索</el-button>
          </div>

          <el-table ref="multipleTable" :data="tableData3" border style="width: 100%">
            </el-table-column>
            <el-table-column prop="userId" label="账号id">
            </el-table-column>
            </el-table-column>
            <el-table-column prop="supPhone" label="电话">
            </el-table-column>
            <el-table-column prop="supName" label="姓名">
            </el-table-column>
            <el-table-column prop="supCountry" label="所在国家/地区">
            </el-table-column>
            <el-table-column prop="supCertificate" label="律师证书">
            </el-table-column>
            <el-table-column prop="regulator" label="监管机构名称">
            </el-table-column>
            <el-table-column prop="approvalDesc" label="审批描述">
            </el-table-column>
            <el-table-column prop="state" label="项目状态">
              <template slot-scope="scope">
                <div class="f-row-Wcenter" style="color:#ff8f0f;">
                  {{scope.row.state == 0 ?'不可用':''}}
                  {{scope.row.state == 1 ?'草稿':''}}
                  {{scope.row.state == 2 ?'审核中':''}}
                  {{scope.row.state == 3 ?'审批通过':''}}
                  {{scope.row.state == 4 ?'审批不通过':''}}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="200" class="f-row-Hcenter">
              <template slot-scope="scope">
                <div class="f-row-Hcenter">
                  <el-button @click="toDetails({page:'supDetails',row:scope.row})" type="text" size="small">详情</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 100%;margin-top: 10px;" class="f-row-Wcenter">
            <el-pagination style="margin-left: 100px;" background layout="prev, pager, next" :page-size="query3.pageSize"
              :total="query3.total" @prev-click="onprevclick3" @next-click="onnextclick3" @current-change="onCurrentChange3">
            </el-pagination>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
  import serveApi from "@/api/serveApi"
  export default {
    data() {
      return {
        userId: '',
        query1: {
          // status: '', //string状态0草稿，1初审中，2初审不通过，3初审通过，4复审中，5复审不通过，6复审通过
          userId: '', //integer($int64)用户
          command: '全部',
          pageNum: 1, //integer($int32)页码
          pageSize: 6, //integer($int32)每页大小
          currentPage: 0, //当前页数
          totalPage: 1, //总页数
          total: 0, //总条数条数
          toastTitle: false, //显示加载
        },
        query2: {
          // status: '', //string状态0草稿，1初审中，2初审不通过，3初审通过，4复审中，5复审不通过，6复审通过
          userId: '', //integer($int64)用户
          command: '全部',
          pageNum: 1, //integer($int32)页码
          pageSize: 6, //integer($int32)每页大小
          currentPage: 0, //当前页数
          totalPage: 1, //总页数
          total: 0, //总条数条数
          toastTitle: false, //显示加载
        },
        query3: {
          supName: '', //监管姓名
          // status: '', //string状态0草稿，1初审中，2初审不通过，3初审通过，4复审中，5复审不通过，6复审通过
          userId: '', //integer($int64)用户
          command: '全部',

          pageNum: 1, //integer($int32)页码
          pageSize: 6, //integer($int32)每页大小
          currentPage: 0, //当前页数
          totalPage: 1, //总页数
          total: 0, //总条数条数
          toastTitle: false, //显示加载
        },
        tableData1: [],
        tableData2: [],
        tableData3: [],
        multipleSelection: []
      }
    },
    mounted() {
      this.userId = this.$store.state.userInfo.id;

      this.getTable1(1);
      this.getTable2(1);
      this.getTable3(1);

    },
    methods: {
      toDetails(data) {
        this.$router.push({
          name: data.page,
          query: data.row
        })
      },
      getTable1(pageNum) {
        let that = this;
        if (pageNum > 0) {
          that.query1.pageNum = pageNum;
        }
        if (!that.userId) {
          that.$message.error('userId为空')
          return;
        }
        serveApi.applyLawyer_selectByPage(this.query1).then(res => {
          if (res.status === "0000") {
            if (res.data) {
              //分页请求
              that.tableData1 = res.data;
              that.query1.totalPage = res.pages;
              that.query1.total = res.total;
              if (that.query1.currentPage >= that.query1.totalPage) {
                that.query1.toastTitle = true;
              } else {
                that.query1.toastTitle = false;
                that.query1.currentPage = that.query1.pageNum;
                that.query1.pageNum = that.query1.pageNum + 1;
              }
            }
          } else {
            that.$message.error(res.message);
          }
        });

      },
      getTable2(pageNum) {
        let that = this;
        if (pageNum > 0) {
          that.query2.pageNum = pageNum;
        }
        if (!that.userId) {
          that.$message.error('userId为空')
          return;
        }

        serveApi.applyAccountant_selectByPage(this.query2).then(res => {
          if (res.status === "0000") {
            if (res.data) {
              //分页请求
              that.tableData2 = res.data;
              that.query2.totalPage = res.pages;
              that.query2.total = res.total;
              if (that.query2.currentPage >= that.query2.totalPage) {
                that.query2.toastTitle = true;
              } else {
                that.query2.toastTitle = false;
                that.query2.currentPage = that.query2.pageNum;
                that.query2.pageNum = that.query2.pageNum + 1;
              }
            }
          } else {
            that.$message.error(res.message);
          }
        });

      },
      getTable3(pageNum) {
        let that = this;
        if (pageNum > 0) {
          that.query3.pageNum = pageNum;
        }
        if (!that.userId) {
          // that.query3.userId = that.userId;

          that.$message.error('userId为空')
          return;
        }

        serveApi.applySupervisor_selectByPage(this.query3).then(res => {
          if (res.status === "0000") {
            if (res.data) {
              //分页请求
              that.tableData3 = res.data;
              that.query3.totalPage = res.pages;
              that.query3.total = res.total;
              if (that.query3.currentPage >= that.query3.totalPage) {
                that.query3.toastTitle = true;
              } else {
                that.query3.toastTitle = false;
                that.query3.currentPage = that.query3.pageNum;
                that.query3.pageNum = that.query3.pageNum + 1;
              }
            }
          } else {
            that.$message.error(res.message);
          }
        });

      },
      onprevclick1() {
        this.query1.currentPage = this.query1.currentPage - 1;
        this.query1.pageNum = this.query1.currentPage;
        this.getTable1();
      },
      onnextclick1() {
        this.getTable1();
      },
      onCurrentChange1(e) {
        this.getTable1(e);
      },
      onprevclick2() {
        this.query2.currentPage = this.query2.currentPage - 1;
        this.query2.pageNum = this.query2.currentPage;
        this.getTable2();
      },
      onnextclick2() {
        this.getTable2();
      },
      onCurrentChange2(e) {
        this.getTable2(e);
      },
      onprevclick3() {
        this.query3.currentPage = this.query3.currentPage - 1;
        this.query3.pageNum = this.query3.currentPage;
        this.getTable3();
      },
      onnextclick3() {
        this.getTable3();
      },
      onCurrentChange3(e) {
        this.getTable3(e);
      },
      handleCommand1(command) {
        this.query1.state = command;
        if (this.query1.state == 0) {
          this.query1.command = '全部';
          delete this.query1.state;
        }
        if (this.query1.state == 1) {
          this.query1.command = '草稿';
        }
        if (this.query1.state == 2) {
          this.query1.command = '审核中';
        }
        if (this.query1.state == 3) {
          this.query1.command = '审批通过';
        }
        if (this.query1.state == 4) {
          this.query1.command = '审批不通过';
        }

      },
      handleCommand2(command) {
        this.query2.state = command;
        if (this.query2.state == 0) {
          this.query2.command = '全部';
          delete this.query2.state;
        }
        if (this.query2.state == 1) {
          this.query2.command = '草稿';
        }
        if (this.query2.state == 2) {
          this.query2.command = '审核中';
        }
        if (this.query2.state == 3) {
          this.query2.command = '审批通过';
        }
        if (this.query2.state == 4) {
          this.query2.command = '审批不通过';
        }
      },
      handleCommand3(command) {
        this.query3.state = command;
        if (this.query3.state == 0) {
          this.query3.command = '全部';
          delete this.query3.state;
        }
        if (this.query3.state == 1) {
          this.query3.command = '草稿';
        }
        if (this.query3.state == 2) {
          this.query3.command = '审核中';
        }
        if (this.query3.state == 3) {
          this.query3.command = '审批通过';
        }
        if (this.query3.state == 4) {
          this.query3.command = '审批不通过';
        }
      }

    }
  }
</script>

<style scoped lang="scss">
  .header {
    margin-top: 30px;
  }

  .table-box {
    width: 98%;
  }
</style>
